<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>梦祥文档</title>
    <meta name="author" content="yinqi">
    <link href="/dpstudio/doc/css/bootstrap.min.css" rel="stylesheet">
    <link href="/dpstudio/doc/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="/dpstudio/doc/css/style.min.css" rel="stylesheet">
    <style>
        #test {
            overflow-y: scroll;
            right: 0;
            padding: 20px 20px;
            position: fixed;
            top: 60px;
            bottom: 0px;
            background-color: #FFF;
            border-left: 2px solid #eef1f6;
            transition: all .2s ease;
            -webkit-transition: all .2s ease;
            z-index: 1;
        }

        .test-on {
            width: 800px;
            cursor: auto;
        }

        /* 侧边栏开关 */
        .lyear-aside-toggler1 {
            margin-right: .25rem;
            padding: .25rem .95rem .25rem .25rem;
            line-height: 1.5;
            cursor: pointer;
        }

        .lyear-aside-toggler1 .lyear-toggler-bar {
            display: block;
            height: 2px;
            width: 20px;
            background-color: #4d5259;
            margin: 4px 0px;
            -webkit-transition: 0.3s;
            transition: 0.3s;
        }

        .lyear-aside-toggler1 .lyear-toggler-bar:nth-child(2) {
            width: 15px;
        }

        .lyear-aside-toggler1:hover .lyear-toggler-bar:nth-child(2) {
            width: 20px;
        }
    </style>
</head>

<body>
<div class="lyear-layout-web" id="doc">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">

            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a href=""><img src="/dpstudio/doc/image/doc.png" title="LightYear" alt="LightYear"/></a>
            </div>
            <div class="lyear-layout-sidebar-scroll">

                <nav class="sidebar-main"></nav>

                <div class="sidebar-footer">
                    <p class="copyright">Copyright &copy; 2020. <a target="_blank"
                                                                   href="http://www.dp-studio.cn">梦祥文档</a> All rights
                        reserved.</p>
                </div>
            </div>

        </aside>
        <!--End 左侧导航-->

        <!--头部信息-->
        <header class="lyear-layout-header">

            <nav class="navbar navbar-default">
                <div class="topbar">

                    <div class="topbar-left">
                        <div class="lyear-aside-toggler">
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title" id="docTitle"> 梦祥文档</span>
                    </div>
                    <div class="topbar-right">
                        <ul>
                            <li class="navbar-page-title"><a id="rea" href="">重新生成文档</a></li>
                            <li class="navbar-page-title"><a id="hea" href="">下载html离线文档</a></li>
                            <li class="navbar-page-title"><a id="ma" href="">下载markdown离线文档</a></li>
                            <li class="navbar-page-title openTest" style="display: none"><a href="javascript:void(0)"
                                                                                            show="0"
                                                                                            id="openTest">在线测试</a></li>
                        </ul>

                    </div>
                </div>
            </nav>

        </header>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content main1" style="display: none;">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header"><h3 id="title"></h3></div>
                            <div class="card-body">
                                <!--基本信息-->
                                <ul class="list-group">
                                    <li class="list-group-item list-group-item-info" id="desc"></li>
                                    <li class="list-group-item list-group-item-info" id="method"></li>
                                    <li class="list-group-item list-group-item-info" id="url">
                                    </li>
                                    <li class="list-group-item list-group-item-info" id="respDesc">
                                    </li>
                                </ul>
                                <div class="panel-group" role="tablist" aria-multiselectable="true">
                                    <!--请求参数-->
                                    <div class="panel panel-primary">
                                        <div class="panel-heading" role="tab" id="requestHead">
                                            <h4 class="panel-title">
                                                <a role="button" data-toggle="collapse" data-parent="#accordion"
                                                   href="#request" aria-expanded="true" aria-controls="request">
                                                    请求参数
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="request" class="panel-collapse collapse in" role="tabpanel"
                                             aria-labelledby="requestHead">
                                            <div class="panel-body">
                                                <div class="table-responsive">
                                                    <table class="table table-bordered">
                                                        <thead>
                                                        <tr>
                                                            <th>#</th>
                                                            <th>参数名</th>
                                                            <th>类型</th>
                                                            <th>是否必填</th>
                                                            <th>描述</th>
                                                            <th>示例值</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody id="requestContent">

                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--响应参数-->
                                    <div class="panel panel-primary">
                                        <div class="panel-heading" role="tab" id="responseHead">
                                            <h4 class="panel-title">
                                                <a role="button" data-toggle="collapse" data-parent="#accordion"
                                                   href="#response" aria-expanded="true" aria-controls="response">
                                                    响应参数
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="response" class="panel-collapse collapse in" role="tabpanel"
                                             aria-labelledby="responseHead">
                                            <div class="panel-body">
                                                <div class="table-responsive">
                                                    <div id="responseContent">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--返回例子-->
                                    <div class="panel panel-primary">
                                        <div class="panel-heading" role="tab" id="backHead">
                                            <h4 class="panel-title">
                                                <a role="button" data-toggle="collapse" data-parent="#accordion"
                                                   href="#back" aria-expanded="true" aria-controls="back">
                                                    返回例子
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="back" class="panel-collapse collapse in" role="tabpanel"
                                             aria-labelledby="backHead">
                                            <div class="panel-body">
                                                <blockquote class="blockquote">
                                                  <pre id="respBody">

                                                  </pre>
                                                </blockquote>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>

            </div>

            <!---测试弹窗-->
            <div id="test" style="display: none;" class="test-on">
                <!---管理-->
                <div class="topbar-left">
                    <div class="lyear-aside-toggler1">
                        <span class="lyear-toggler-bar"></span>
                        <span class="lyear-toggler-bar"></span>
                        <span class="lyear-toggler-bar"></span>
                    </div>
                </div>
                <!---表单-->
                <h2>测试</h2> <br>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">

                                <form class="row" id="testForm">
                                    <div id="testParam">

                                    </div>

                                    <div class="form-group col-md-12">
                                        <button type="button" onclick="test()" class="btn btn-primary ajax-post">确 定
                                        </button>
                                        <button type="reset" class="btn btn-default">重 置</button>
                                    </div>
                                </form>

                            </div>
                            <div class="card-footer">
                                <div class="form-group col-md-12">
                                    <label>返回内容</label>
                                    <blockquote class="blockquote">
                                                  <pre id="testBack">

                                                  </pre>
                                    </blockquote>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </main>
        <!--End 页面主要内容-->


        <!--默认页面主要内容-->
        <main class="lyear-layout-content main2">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header"></div>
                            <div class="card-body">

                                <blockquote class="blockquote">
                                    文档首页
                                </blockquote>

                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </main>
        <!--默认End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" src="/dpstudio/doc/js/jquery.min.js"></script>
<script type="text/javascript" src="/dpstudio/doc/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/dpstudio/doc/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/dpstudio/doc/js/main.min.js"></script>
<script>

    var apiHost = "";
    var apiActions = [];

    /**
     * 菜单
     * @param data 菜单JSON数据
     *        id 菜单唯一ID
     *        name 菜单名称
     *        url 菜单链接地址
     *        icon 图标
     *        pid  父级ID
     *        is_out 是否外链0否|1是,外链a标签没有class='multitabs'
     *        is_home 是否首页
     */
    var setSidebar = function (data) {
        var html = createMenu(data, true);
        $('.sidebar-main').append(html);
    }

    var createMenu = function (data, is_frist) {
        var menu_body = is_frist ? '<ul class="nav nav-drawer">' : '<ul class="nav nav-subnav">';
        var apiInfoList = data.data.apiInfoList;
        for (var i = 0; i < apiInfoList.length; i++) {
            var menuName = "暂无名称";
            if ($.trim(apiInfoList[i].docName)) {
                menuName = apiInfoList[i].docName;
            }
            var menuNameStr = '<span>' + menuName + '</span>';
            var childRenList = apiInfoList[i].apiModuleList;
            if (childRenList && childRenList.length > 0) {
                menu_body += '<li class="nav-item nav-item-has-subnav"><a href="javascript:void(0)"><i class="mdi mdi-file-document"></i>' + menuNameStr + '</a>';
                menu_body += createMenu1(childRenList);
            } else {
                menu_body += '<li class="nav-item "><a href="javascript:void(0)"><i class="mdi mdi-file-document"></i> ' + menuName + ' </a>';
            }
            menu_body += '</li>';
        }

        menu_body += '</ul>';
        return menu_body;
    };
    //创建二级菜单
    var createMenu1 = function (data) {
        var menu_body = '<ul class="nav nav-subnav">';
        for (var i = 0; i < data.length; i++) {
            var menuName = "暂无名称";
            if ($.trim(data[i].comment)) {
                menuName = data[i].comment;
            }
            var menuNameStr = '<span>' + menuName + '</span>';
            var childRenList = data[i].apiActions;
            if (childRenList && childRenList.length > 0) {
                menu_body += '<li class="nav-item nav-item-has-subnav"><a href="javascript:void(0)">' + menuNameStr + '</a>';
                menu_body += createMenu2(childRenList);
            } else {
                menu_body += '<li class="nav-item " ><a href="javascript:void(0)"> ' + menuNameStr + '</a>';
            }
            menu_body += '</li>';
        }

        menu_body += '</ul>';
        return menu_body;
    };
    //创建三级菜单
    var createMenu2 = function (data) {
        var menu_body = '<ul class="nav nav-subnav">';
        for (var i = 0; i < data.length; i++) {
            apiActions.push(data[i]);
            var menuName = "暂无名称";
            if ($.trim(data[i].title)) {
                menuName = data[i].title;
            }
            var menuNameStr = '<span>' + menuName + '</span>';
            menu_body += '<li class="nav-item " did="' + data[i].id + '" onclick="change(this);"><a href="#doc"> ' + menuNameStr + ' </a>';
            menu_body += '</li>';
        }

        menu_body += '</ul>';
        return menu_body;
    };

    //点击左侧菜单栏
    function change(a) {
        $(".nav-item").removeClass("active");
        $(a).addClass("active");
        var did = $(a).attr("did");
        console.log(did)
        if ($.trim(did)) {
            for (var i = 0; i < apiActions.length; i++) {
                var apiAction = apiActions[i];
                if (apiAction.id === did) {
                    setInfo(apiAction);
                    break;
                }
            }

        }
        $(".main1").show();
        $(".main2").hide();
        $(".openTest").show();

    }

    //处理test参数
    function setTestForm(currentApiAction) {
        var html = '<div class="form-group col-md-12"><label>请求方式</label><div class="clearfix">';
        var methods = currentApiAction.methods;
        $.each(methods, function (index, item) {
            if (index === 0) {
                html += '<label class="lyear-radio radio-inline radio-primary"> <input checked="checked" tvalue="' + item + '" type="radio" name="ajaxMethod" value="' + item + '"><span>' + item + '</span> </label>';
            } else {
                html += '<label class="lyear-radio radio-inline radio-primary"> <input tvalue="' + item + '" type="radio" name="ajaxMethod" value="' + item + '"><span>' + item + '</span> </label>';
            }

        });
        html += '</div></div>';
        var requestParams = getRequestList(currentApiAction);
        $.each(requestParams, function (index1, item1) {
            html += '<div class="form-group col-md-12"><label for="title">' + item1.paramDesc + '</label><input type="text" class="form-control" name="' + item1.paramName + '" value="'+item1.demoValue+'" placeholder="请输入' + item1.paramDesc + '"></div>';
        });
        $("#testParam").html(html)
    }


    //请求
    function test() {
        var data = getValues($("#testForm"));
        var url = $("#testForm").attr("action");
        if (!$.trim(url)) {
            alert("接口url获取失败,请刷新页面重试");
        }
        var newStr = url.indexOf("/");
        if (newStr === -1) {
            url = "/" + url;
        }

        if ($.trim(apiHost)) {
            var newStr1 = apiHost.lastIndexOf("/");
            if (newStr1 === -1) {
                apiHost = apiHost + "/";
            }
            url = apiHost + url;
        }
        var method = data.ajaxMethod.toLocaleLowerCase();
        delete data["ajaxMethod"];
        $.ajax({
            type: method,
            data: data,
            url: url,
            dataType:"json",
            success: function (result) {
                console.log(result);
                $('#testBack').html(JSON.stringify(JSON.parse(JSON.stringify(result)), null, 2));
            },error:function(result){
                $('#testBack').text(result.responseText);
            }
        });

    }

    //获取请求参数集合
    function getRequestList(currentApiAction) {
        var names = {};
        var data = [];
        for (var i = 0; i < currentApiAction.params.length; i++) {
            var par = currentApiAction.params[i];
            data.push(par);
            // this.$set(this.testForm, par.paramName, '');//动态绑定监控
            names[par.paramName] = par.paramName;
        }

        if (currentApiAction.paramObjs) {
            for (var k = 0; k < currentApiAction.paramObjs.length; k++) {
                var paramObj = currentApiAction.paramObjs[k];
                if (!paramObj.fieldInfos) {
                    continue;
                }

                for (var j = 0; j < paramObj.fieldInfos.length; j++) {
                    var fieldInfo = paramObj.fieldInfos[j];
                    if (names[fieldInfo.name]) {
                        //@param上已经有了,则不再使用@paramObj中的
                        continue;
                    }
                    data.push({
                        paramName: fieldInfo.name,
                        paramDesc: fieldInfo.comment,
                        require: fieldInfo.require,
                        paramType: fieldInfo.simpleTypeName,
                        demoValue: fieldInfo.demoValue
                    });
                }
            }
        }
        return data;
    }

    //获取返回参数集合
    function getResponseList(currentApiAction) {
        var names = {};
        var data = [];
        if (currentApiAction && currentApiAction.respParam && currentApiAction.respParam.length > 0) {
            for (var i = 0; i < currentApiAction.respParam.length; i++) {
                var par = currentApiAction.respParam[i];
                names[par.paramName] = par.paramName;
                data.push({
                    paramName: par.paramName,
                    paramDesc: par.paramDesc,
                    paramType: par.paramType,
                    require: par.require,
                    demoValue: par.demoValue,
                    dataKey: par.paramName,
                    dataType: par.paramType
                });
            }
        }

        if (currentApiAction.returnObj) {
            for (var k = 0; k < currentApiAction.returnObj.length; k++) {
                var returnObj = currentApiAction.returnObj[k];
                if (!returnObj.fieldInfos) {
                    continue;
                }

                for (var j = 0; j < returnObj.fieldInfos.length; j++) {
                    var fieldInfo = returnObj.fieldInfos[j];
                    if (names[fieldInfo.name]) {
                        continue;
                    }
                    data.push({
                        paramName: fieldInfo.name,
                        paramDesc: fieldInfo.comment,
                        require: fieldInfo.require,
                        paramType: fieldInfo.simpleTypeName,
                        demoValue: fieldInfo.demoValue,
                        dataKey: returnObj.dataKey,
                        dataType: returnObj.dataType
                    });
                }
            }
        }

        return group(data);
    }

    //根据字段分组
    function group(arr) {

        var map = {},
            dest = [];
        for (var i = 0; i < arr.length; i++) {
            var ai = arr[i];
            if (!map[ai.dataKey]) {
                dest.push({
                    dataKey: ai.dataKey,
                    dataType: ai.dataType,
                    item: [ai]
                });
                map[ai.dataKey] = ai;
            } else {
                for (var j = 0; j < dest.length; j++) {
                    var dj = dest[j];
                    if (dj.dataKey === ai.dataKey) {
                        dj.item.push(ai);
                        break;
                    }
                }
            }
        }
        return dest;
    }

    //给右侧信息复制
    function setInfo(data) {
        $("#title").html(data.title);
        $("#desc").html("接口描述：" + data.title);
        $("#method").html("请求方式：" + data.methods.join(","));
        $("#url").html("接口地址：" + data.uri);
        $("#testForm").attr("action", data.uri);
        $("#respDesc").html("接口返回：" + data.returnDesc);
        $("#respBody").html(JSON.stringify(JSON.parse(data.respbody), null, 2));
        //请求参数
        var requestList = getRequestList(data);
        var html = "";
        $.each(requestList, function (index, item) {
            var requireText = item.require ? '是' : '否';
            var xuhao = index * 1 + 1 * 1;
            html += '<tr>' +
                '<th scope = "row" >' + xuhao + '</th>' +
                '<td>' + item.paramName + '</td>' +
                '<td>' + item.paramType + '</td>' +
                '<td>' + requireText + '</td>' +
                '<td>' + item.paramDesc + '</td>' +
                '<td>' + item.demoValue + '</td>' +
                '</tr>';
        });
        $("#requestContent").html(html);
        //返回参数
        var responseList = getResponseList(data);
        var responseHtml = "";
        $.each(responseList, function (index, item) {
            var dataTypeStr;
            if ($.trim(item.dataType)) {
                if (item.dataType === 'object') {
                    dataTypeStr = "json对象";
                } else if (item.dataType === 'array') {
                    dataTypeStr = "json数组";
                } else {
                    dataTypeStr = item.dataType;
                }
            } else {
                dataTypeStr = "data";
            }

            responseHtml += '<div>' +
                '<blockquote class="blockquote" style="color: #8a6d3b;"><div>返回属性key:' + item.dataKey + ', 返回类型:' + dataTypeStr + ' </div></blockquote>' +
                '<hr>' +
                '<table class="table table-bordered">' +
                '<thead>' +
                '<tr>' +
                '<th style="width: 10%">#</th>' +
                '<th style="width: 20%">参数名</th>' +
                '<th style="width: 10%">类型</th>' +
                '<th style="width: 10%">是否必填</th>' +
                '<th style="width: 30%">描述</th>' +
                '<th style="width: 20%">示例值</th>' +
                '</tr>' +
                '</thead>' +
                '<tbody>\n';

            var paramList = item.item;
            $.each(paramList, function (pindex, pitem) {
                var responseReqText = pitem.require ? '是' : '否';
                var xuhao = pindex * 1 + 1 * 1;
                responseHtml += '<tr>' +
                    '<th scope = "row" >' + xuhao + '</th>' +
                    '<td>' + pitem.paramName + '</td>' +
                    '<td>' + pitem.paramType + '</td>' +
                    '<td>' + responseReqText + '</td>' +
                    '<td>' + pitem.paramDesc + '</td>' +
                    '<td>' + pitem.demoValue + '</td>' +
                    '</tr>';
            });
            responseHtml += '</tbody></table></div>';
        });
        $("#responseContent").html(responseHtml);
        // //处理test参数
        setTestForm(data);
    }


    //请求文档信息
    $.get("http://localhost:8080/dpstudio/wd/apis", function (e) {
        apiHost = e.apiHost;
        ///dpstudio/wd/rebuild
        var reUrl = "dpstudio/wd/rebuild";
        var htmlUrl = "/dpstudio/wd/download/page";
        var mdUrl = "/dpstudio/wd/download/mark";
        if($.trim(apiHost)){
            reUrl = apiHost+"/"+reUrl;
            htmlUrl = apiHost+"/"+htmlUrl;
            mdUrl = apiHost+"/"+mdUrl;
            $("#rea").attr("href",reUrl);
            $("#hea").attr("href",htmlUrl);
            $("#ma").attr("href",mdUrl);
        }
        $("#docTitle").html(e.data.properties.title+"("+e.data.properties.version+")");
        setSidebar(e);
    }, "json");

    //关闭测试
    $(".lyear-aside-toggler1").click(function () {
        $("#test").hide();
    });
    //打开测试
    $("#openTest").click(function () {
        var show = $(this).attr("show");
        if (show === "1") {
            $(this).attr("show", 0);
            $("#test").hide();
        } else {
            $(this).attr("show", 1);
            $("#test").show();
        }
    });

    // 侧边栏导航
    $(".sidebar-main").on("click", ".nav-item-has-subnav > a", function () {
        $subnavToggle = jQuery(this);
        $navHasSubnav = $subnavToggle.parent();
        $topHasSubNav = $subnavToggle.parents('.nav-item-has-subnav').last();
        $subnav = $navHasSubnav.find('.nav-subnav').first();
        $viSubHeight = $navHasSubnav.siblings().find('.nav-subnav:visible').outerHeight();
        $scrollBox = $('.lyear-layout-sidebar-scroll');
        $navHasSubnav.siblings().find('.nav-subnav:visible').slideUp(500).parent().removeClass('open');
        $subnav.slideToggle(300, function () {
            $navHasSubnav.toggleClass('open');

            // 新增滚动条处理
            var scrollHeight = 0;
            pervTotal = $topHasSubNav.prevAll().length,
                boxHeight = $scrollBox.outerHeight(),
                innerHeight = $('.sidebar-main').outerHeight(),
                thisScroll = $scrollBox.scrollTop(),
                thisSubHeight = $(this).outerHeight(),
                footHeight = 121;

            if (footHeight + innerHeight - boxHeight >= (pervTotal * 48)) {
                scrollHeight = pervTotal * 48;
            }
            if ($subnavToggle.parents('.nav-item-has-subnav').length == 1) {
                $scrollBox.animate({scrollTop: scrollHeight}, 300);
            } else {
                // 子菜单操作
                if (typeof ($viSubHeight) != 'undefined' && $viSubHeight != null) {
                    scrollHeight = thisScroll + thisSubHeight - $viSubHeight;
                    $scrollBox.animate({scrollTop: scrollHeight}, 300);
                } else {
                    if ((thisScroll + boxHeight - $scrollBox[0].scrollHeight) == 0) {
                        scrollHeight = thisScroll - thisSubHeight;
                        $scrollBox.animate({scrollTop: scrollHeight}, 300);
                    }
                }
            }
        });
    });


    //获取表单数据
    function getValues(dom) {
        var data = {};
        dom.find("input[type='text'],input[type='hidden'],input[type='number'],input[type='password'],textarea").each(function () {
            data[$(this).attr("name")] = $.trim($(this).val());
        });
        dom.find("input[type='radio']").each(function () {
            if ($(this).prop('checked')) {
                data[$(this).attr("name")] = $(this).attr("tvalue");
            }
        });
        return data;
    }
</script>
</body>
</html>
